<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./city.js"></script>
</head>

<body>
    <select name="" id="provice">
        <option value="">请选择省</option>
    </select>
    <select name="" id="city">
        <option value="">请选择县</option>
    </select>
    <select name="" id="area">
        <option value="">请选择区</option>
    </select>
</body>
<script>
    $(function () {
        var provice = ""
        for (i in citys) {
            provice += `<option value="${i}">${citys[i].name}</option>`
            // console.log(i) //省下标
            // console.log(citys[i].name) //找到citys所有下标中的name
        }
        $('#provice').append(provice) //
        $('#provice').change(function () {
            $('#city option:gt(0)').remove() //删除之前选中的 显示现在选中的
            var arr = citys[$(this).val()].city //找到当前选中的省的下标
            var strCity = ''
            for (i in arr) {
                strCity += `<option value="${$(this).val()}-${i}">${arr[i].name}</option>`
                // console.log($(this).val()) //被选的省下标
                // console.log(i) //县下标
                // console.log(arr[i].name) //县名称
            }
            $('#city').append(strCity)
        })
        $('#city').change(function () {
            var arr = $(this).val().split('-')
            // console.log($(this).val().split('-'))  //(分割字符串方法)获取省 县下标
            $('#area option:gt(0)').remove() //删除之前选中的 显示现在选中的
            var area = citys[arr[0]].city[arr[1]].area
            var html = ''
            for (i in area) {
                html += `<option value="">${area[i]}</option>`
            }
            $('#area').append(html)
        })
    })
</script>

</html>